<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    class="demo_ruleForm"
  >
    <div v-if="submitType === 1">
      <el-form-item prop="name">
        <el-input
          v-model="ruleForm.name"
          type="text"
          autocomplete="off"
          placeholder="手机号"
        />
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          v-model="ruleForm.pass"
          type="password"
          autocomplete="off"
          placeholder="输入密码"
          style="margin-top: 22px"
          show-password
        />
      </el-form-item>
    </div>
    <div v-else>
      <el-form-item prop="tel">
        <el-input
          v-model="ruleForm.tel"
          type="text"
          autocomplete="off"
          placeholder="输入手机号码"
        />
      </el-form-item>
      <el-input
        v-model="ruleForm.code"
        placeholder="请输入验证码"
        style="margin-top: 22px"
      >
        <div
          slot="append"
          class="get_code"
          :style="countDown !== '获取验证码' ? 'color: #999' : 'color: #fff'"
          @click="send"
        >
          {{ countDown }}
        </div>
      </el-input>
    </div>
    <div class="note_msg">
      <el-checkbox v-model="checked">
        记住我
      </el-checkbox><el-link
        v-show="submitType !== 0"
        type="warning"
        :underline="false"
        @click="handelSubmitType(0)"
      >
        短信验证登录
      </el-link>
      <el-link
        v-show="submitType !== 1"
        type="warning"
        :underline="false"
        @click="handelSubmitType(1)"
      >
        用户名密码登录
      </el-link>
    </div>
    <div
      class="submit_btn"
      @click="submitForm('ruleForm')"
    >
      登录
    </div>
    <p>已有账号，忘记密码?</p>
  </el-form>
</template>
<script>
import { telReg, passReg } from '@/utils/validate'
import session from '@/utils/session'
export default {
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!passReg.test(value)) {
        callback(
          new Error(
            '密码为包含两种的6-20位英文字母、数字或者符号(除空格)'
          )
        )
      } else callback()
    }
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('此为必填项'))
      } else if (!telReg.test(value)) {
        callback(new Error('手机号格式错误'))
      } else callback()
    }
    return {
      ruleForm: {
        name: '',
        pass: '',
        tel: '',
        code: '',
      },
      rules: {
        name: [{ validator: validateName, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }],
      },
      checked: false,
      submitType: 1,
      countDown: '获取验证码',
      bVerification: false, // 节流
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          session.setToken('yes')
          this.$router.push('/home')
        } else {
          return false
        }
      })
    },
    handelSubmitType(val) {
      this.submitType = val
    },
    async send() {
      if (!telReg.test(this.ruleForm.tel))
        return this.$message.error('请先输入正确的手机号')
      if (this.bVerification) return
      this.bVerification = true
      let countDowns = 59
      const auth_time = setInterval(() => {
        this.countDown = countDowns--
        if (this.countDown >= 0) {
          this.countDown = this.countDown + 's重新获取'
        }
        if (this.countDown <= 0) {
          this.bVerification = false
          this.countDown = '获取验证码'
          clearInterval(auth_time)
        }
      }, 1000)
    },
  },
}
</script>
<style lang="less" scoped>
.demo_ruleForm {
  width: 100%;
  /deep/ .el-form-item {
    margin-bottom: 0px;
  }
  /deep/ .el-input__inner {
    border: 1px solid #5dd5c8;
  }
  .note_msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }
  .submit_btn {
    width: 100%;
    padding: 15px 0;
    background-color: #5dd5c8;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 33px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
  }
  p {
    text-align: center;
    color: #409eff;
    cursor: pointer;
    margin-top: 10px;
  }
  /deep/ .el-input-group__append {
    background-color: #5dd5c8;
    cursor: pointer;
  }
}
</style>